<script setup lang="ts">
import { UserFilled } from "@element-plus/icons-vue";

interface AvatarProps {
  avatar: any
  className?: string
  iconSize?: number
  onClick?: (e?: any) => void
  shape?: "circle" | "square"
}

withDefaults(defineProps<AvatarProps>(), {
  iconSize: 30,
  shape: "square"
})
</script>

<template>
  <div class="avatar_icon_img">
    <img v-if="!!avatar" :class="className" @click="onClick" :src="avatar"
      :style="{ width: iconSize + 'px', height: iconSize + 'px' }" />
    <el-avatar :shape="shape" v-else @click="onClick" :class="className" :size="iconSize" :icon="UserFilled" />
  </div>
</template>

<style lang="scss" scoped>
.avatar_icon_img {
  img {
    flex-shrink: 0;
    border-radius: 10px;
  }
}
</style>
